<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker @keyup.enter.native="handleFilter" class="filter-item"
        size="small"
        value-format="yyyy-MM-dd"
        v-model="filters['startDate']"
        type="date"
        placeholder="选择开始日期">
      </el-date-picker>
      <el-date-picker @keyup.enter.native="handleFilter" class="filter-item"
        size="small"
        value-format="yyyy-MM-dd"
        v-model="filters['endDate']"
        type="date"
        placeholder="选择结束日期">
      </el-date-picker>
      <el-button class="filter-item" size="small"  type="primary" v-waves icon="el-icon-search" @click="loadData">搜索</el-button>
    </div>
    <div v-loading="listLoading">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              {{form.orderNum}}
            </div>
            <div class="card-txt">订单总数（包含取消订单、付款订单、退款订单）</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              ￥ {{form.totalAmount}}
            </div>
            <div class="card-txt">订单总微信金额（包含取消订单、付款订单、退款订单）</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              {{form.totalPoints}} （个）
            </div>
            <div class="card-txt">订单总积分（包含取消订单、付款订单、退款订单）</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              {{form.cancelOrderNum}}
            </div>
            <div class="card-txt">取消订单总数</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              ￥ {{form.cancelTotalAmount}}
            </div>
            <div class="card-txt">取消订单总微信金额</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              {{form.cancelTotalPoints}} （个）
            </div>
            <div class="card-txt">取消订单总积分</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              {{form.payOrderNum}}
            </div>
            <div class="card-txt">付款订单总数</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              ￥ {{form.payTotalAmount}}
            </div>
            <div class="card-txt">付款订单总微信金额</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              {{form.payTotalPoints}} （个）
            </div>
            <div class="card-txt">付款订单总积分</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              {{form.refundOrderNum}}
            </div>
            <div class="card-txt">退款订单总数</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              ￥ {{form.refundTotalAmount}}
            </div>
            <div class="card-txt">退款订单总金额</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always">
            <div class="card-num">
              {{form.refundTotalPoints}} （个）
            </div>
            <div class="card-txt">退款订单总积分</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        dateRange: ' ',
        orderNum: 0,
        totalAmount: 0,
        totalPoints: 0,
        cancelOrderNum: 0,
        cancelTotalAmount: 0,
        cancelTotalPoints:  0,
        payOrderNum: 0,
        payTotalAmount: 0,
        payTotalPoints: 0,
        refundOrderNum: 0,
        refundTotalAmount: 0,
        refundTotalPoints: 0
      },
      keywords: '',
      startDate: '',
      endDate: ''
    }
  },
  created () {
    this.loadData();
  },
  methods: {
    loadData() {
      this.listLoading = true;
      let startDate = this.filters['startDate'];
      let endDate = this.filters['endDate'];
      this.$get("/admin/business_report/order_count", {
        startDate: startDate,
        endDate: endDate
      })
      .then(data => {
        this.listLoading = false;
        this.form = data;
      })
      .catch(_ => {
        this.listLoading = false;
      });
    }
  }
}

</script>
